<template>
	<div>
		<el-row :gutter="20" v-permission="['getStatistics1,GET']">
			<template v-if="panels.length == 0">
				<el-col :span="6" v-for="i in 4" :key="i">
					<el-skeleton style="width: 100%;" animated loading>
						<template #template>
							<el-card shadow="hover" class="border-0">
								<template #header>
									<div class="flex justify-between">
										<el-skeleton-item variant="text" style="width: 50%;" />
										<el-skeleton-item variant="text" style="width: 50%;" />
									</div>
								</template>
								<el-skeleton-item variant="text" style="width: 80%;" />
								<el-divider />
								<div class="flex justify-between text-sm text-gray-500">
									<el-skeleton-item variant="text" style="width: 50%" />
									<el-skeleton-item variant="text" style="width: 10%;" />
								</div>
							</el-card>
						</template>
					</el-skeleton>
				</el-col>
			</template>
			<el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
				<el-card shadow="hover" class="border-0">
					<template #header>
						<div class="flex justify-between">
							<span class="text-sm">{{item.title}}</span>
							<el-tag :type="validateUnitColor(item.unitColor)" effect="plain">{{item.unit}}</el-tag>
						</div>
					</template>
					<span class="text-3xl font-bold text-gray-500">
						<CountTo :value="item.value" />
					</span>
					<el-divider />
					<div class="flex justify-between text-sm text-gray-500">
						<span>{{item.subTitle}}</span>
						<span>{{item.subValue}}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<IndexNavs class="mb-3" />
		<el-row :gutter="20">
			<el-col :span="12" :offset="0">
				<IndexChart v-permission="['getStatistics3,GET']" />
			</el-col>
			<el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
				<indexCard title="店铺及商品展示" tip="店铺及商品展示" :btns="goods" class="mb-3" />
				<indexCard title="交易提示" tip="需要立即处理的交易订单" :btns="order" />
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {
		showModal
	} from '~/composables/util'
	import {
		logout
	} from "~/api/manager"
	import {
		toast
	} from '../composables/util'
	import {
		useRouter
	} from 'vue-router'
	import {
		useStore
	} from 'vuex'
	import {
		getStatistics1,
		getStatistics2,
		getStatistics3
	} from "../api/index.js";
	import CountTo from "~/components/CountTo.vue";
	import IndexNavs from "~/components/indexNavs.vue";
	import {
		ref
	} from "vue";
	import IndexChart from "~/components/indexChart.vue";
	import IndexCard from "~/components/indexCard.vue";

	const panels = ref([])
	getStatistics1()
		.then(res => {
			panels.value = res.panels
			console.log(panels.value);
		})
	const goods = ref([])
	const order = ref([])
	getStatistics2().then(res => {
		goods.value = res.goods
		order.value = res.order
	})

	const router = useRouter()
	const store = useStore()

	function handleLogout() {
		showModal("是否要退出登录？").then(res => {
			logout().finally(() => {
				store.dispatch("logout")
				//跳转回登录页
				router.push("/login")
				//提示退出登录成功
				toast("退出登录成功")
			})
		})
	}

	// 验证并修正 unitColor 的函数
	function validateUnitColor(unitColor) {
		const validColors = ["primary", "success", "info", "warning", "danger"];
		if (validColors.includes(unitColor)) {
			return unitColor;
		}
		return "primary"; // 如果不是有效值，默认设置为 "primary"
	}
</script>

<style>
</style>